<template>
	<view class="container">
		<view class="bg">		
			<view class="balance-title">
				余额（元）
			</view>
			<form @submit="formSubmit" @reset="formReset">	
				<tui-list-cell :hover="false" class="tui-list-cell">
					<view class="tui-line-cell">
						<input placeholder-class="phcolor" class="tui-input" name="amount" :value="toAmount(balanceInfo.balance)" disabled  maxlength="50" type="number"  placeholder-style="color:#999999"/>
					</view>
				</tui-list-cell>
				
				<view v-if="balanceInfo.deposit_web_status == '1'" class="tui-btn-box">
					<view class="btn-primary" style="text-align: center !important;" @tap="details('./withdraw')">余额转系统</view>
				</view>
				
				<view v-if="balanceInfo.deposit_card_status == '1'" class="tui-btn-box" style="padding: 30rpx 0 !important;">
					<button class="btn-primary" style="text-align: center !important;border: 1rpx solid #1193E3 !important;background: #FFF !important;color: #1193E3 !important;" @click="status(2)" hover-class="false">提现到银行卡</button>
				</view>
				<view v-if="balanceInfo.deposit_balance_status == '1'" class="tui-btn-box" style="padding: 30rpx 0 !important;">
					<button class="btn-primary" style="text-align: center !important;border: 1rpx solid #1193E3 !important;background: #FFF !important;color: #1193E3 !important;" @click="status(1)" hover-class="false">提现到零钱</button>
				</view>
				
				<view class="tui-btn-box">
					<view class="btn-detailed" @tap="details('./budget')">收支明细</view>
				</view>
			</form>
		</view>
		
		<view class="header">
			<view class="title">温馨提示</view>
			<view class="sub-title" style="margin-bottom: 15rpx;" v-if="balanceInfo.deposit_web_auto_status == 1 && balanceInfo.deposit_web_status == 1"><view class="tui-badge-dot tui-blue"></view>余额转系统：划拨到代理商城的钱包余额，一般情况下实时到账。</view>
			<view class="sub-title" style="margin-bottom: 15rpx;" v-else-if="balanceInfo.deposit_web_status == 1"><view class="tui-badge-dot tui-blue"></view>余额转系统：划拨到代理商城的钱包余额。</view>
			<view class="sub-title" style="margin-bottom: 15rpx;" v-if="balanceInfo.deposit_card_status == 1"><view class="tui-badge-dot tui-blue"></view>提现到银行卡：单次提现金额≥{{toAmount(balanceInfo.deposit_card_min_limit)}}元，每笔提现申请收取{{tui.rate(balanceInfo.deposit_card_fee_rate)}}%手续费，日限额{{toAmount(balanceInfo.deposit_day_card_max_limit)}}元。</view>
			
		<!-- 	<view class="sub-title"><view class="tui-badge-dot tui-blue"></view>每次提现需要收取1元手续费，例如：提现100元，实际到账（100-1）元</view>
			<view class="sub-title"><view class="tui-badge-dot tui-blue"></view>提现有时可能需要等待，如有疑问可
			<tui-icon name="kefu" size="20" color="#0a8fe2"></tui-icon><button open-type="contact" session-from="weapp" class="tui-btn" :data-id="index">咨询客服</button>
			
			</view>
			<view class="sub-title"><view class="tui-badge-dot tui-blue"></view>了解更多信息请阅读 <text class="header-tip" @click="details('../index/new_file?id=用户服务协议')">《用户协议》</text>。</view> -->
		</view>
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
		
	</view>
</template>

<script>
	const form = require("../../components/utils/formValidation.js")
	import tuiButton from "@/components/button/button"
	import tuiBadge from "@/components/badge/badge"
	import tuiIcon from "@/components/icon/icon"
	import tuiToast from "@/components/extend/toast/toast"
	
	export default {
		components: {
			tuiButton,
			tuiBadge,
			tuiIcon,
			tuiToast
		},
		data() {
			return {
				balanceInfo: {balance:0,deposit_max_limit:0},
				status_url: '',
			}
		},
		onLoad:function() {
			this.loadData();
			wx.hideShareMenu();
		},
		methods: {
			status: function(e){
				console.log(e);
				if(e == 1){
					this.status_url = './withdraw';
					this.formSubmit();
				}else if(e == 2){
					this.status_url = './withdraw_bankcard';
					this.formSubmit();
				}
			},
			loadData: function(){
				let that = this;
				that.tui.request('user/account', {}).then((res) => {
					if(res.code == 1000){
						let params = {
							title: "用户不存在或禁用",
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
						wx.navigateBack({
							delta: 1
						})
					}
					that.balanceInfo = res;
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				})
				
			},
			toAmount: function(amount){
				let fee = this.tui.centsToYuan(amount);
				return fee.toFixed(2)
			},
			formSubmit: function(e) {
				//表单规则
				let rules = [{
					name: "amount",
					rule: ["required", "isAmount"],
					msg: ["请输入金额", "请输入正确的金额"]
				}];
				//进行表单检查
				let formData = {
					amount:this.toAmount(this.balanceInfo.balance),
				};
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
					if(this.tui.centsToYuan(this.balanceInfo.balance)<= 0 ){
						let params = {
							title: "提现金额不足无法发起提现",
							imgUrl: "/static/toast/info-circle.png",
							icon: true
						};
						this.$refs.toast.show(params);
						return false
					}
					// if(this.tui.centsToYuan(this.balanceInfo.balance) < this.tui.centsToYuan(this.balanceInfo.deposit_min_limit )){
					// 	let params = {
					// 		title: "最低提现为" + this.tui.centsToYuan(this.balanceInfo.deposit_min_limit ),
					// 		imgUrl: "/static/toast/info-circle.png",
					// 		icon: true
					// 	};
					// 	this.$refs.toast.show(params);
					// 	return false
					// }
					this.details(this.status_url);
				} else {
					uni.showToast({
						title: checkRes,
						// icon: "none"
					});
				}
			},
			details: function(url){
				if(!url){
					return false;
				}
				uni.redirectTo({
					url: url
				})
			},
			
		}
	}
</script>

<style>
	@import '../../static/style/thorui.css';
	.container {
		box-sizing: border-box;
	}
	.bg{
		padding: 0rpx 30rpx 20rpx 30rpx;	
		background: #FFFFFF;
	
	}
	.header {
		padding: 80rpx 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}
	
	.title {
		font-size: 34rpx;
		color: #000;
		font-weight: 500;
		padding-bottom: 20rpx;
	}
	.sub-title {
		font-size: 24rpx;
		color: #999999;
		padding-left: 18rpx;
	}
	.balance-title{
		font-size: 30rpx;
		font-weight: 400;
		margin: 30rpx auto;
		color: #000000;
	}
	.tui-list-cell{
		margin: 20rpx auto;
	}
	.phcolor{
		color: #000;
	}
/* 	.tui-btn-bloc{
		background: #0A8FE2 !important;
	} */
	.btn-primary {
		border-radius: 10rpx !important;
		background: #1193E3 !important;
		font-size: 30rpx !important;
	}
	.tui-btn-box{
		margin: 40rpx auto;
	}
	.btn-detailed{
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #1193E3;
		
	}
	.header-tip{
		color: #1193E3;
	}
	.tui-btn {
		background: none;
		padding: 0;
		margin: 0;
		display: inline;
		/* background: red; */
		height: 24rpx;
		font-size: 24rpx;
		color: #1193E3;
	}
	.tui-badge-dot{
		background: #999999 !important;
		margin-right: 10rpx !important;
		height: 12rpx !important;
		width: 12rpx !important;
	}
	input{
		height: 100rpx !important;
		font-size: 60rpx !important;
		/* background: red !important; */
	}
	.tui-list-cell::after {
		border-bottom: 1rpx solid #FFFFFF;
	}
</style>
